<template>
  <div class="globalrank">
    <!-- 官方排行榜 -->
    <div class="officialrank-box">
      <div
        class="officialrank-item"
        v-for="(item, index) in Toplist"
        :key="index"
        @click="toPlaylistdetails(item.id)"
      >
        <div class="official-item">
          <div class="image">
            <div class="tooltip">
              <i class="iconfont icon-erji"></i>
              {{ item.playCount | playCount }}
            </div>
            <img :src="item.coverImgUrl" alt="" />
            <div class="play">
              <i
                class=" iconfont icon-icon_play"
                :style="{ color: themeColor }"
              ></i>
            </div>
          </div>
          <span>{{ item.name }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import OfficialRank from './components/officialrank'
// import { getToplist } from "@/api/index.js";
export default {
  name: "GlobalRank",
  components: {
    // OfficialRank
  },
  props: {
    Toplist: {
      type: [Array, Object, String]
    },
    themeColor: {
      type: String
    }
  },
  data() {
    return {
      //   Toplist: "", // 全球媒体排行榜
      //   officiallist: [] // 官方排行榜
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    toPlaylistdetails(id) {
      this.$router.push({
        name: "playlistdetails",
        query: {
          id
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
.globalrank {
  //   padding: 0 6.25rem;
  margin-bottom: 5rem;
  h3 {
    // padding: 0 0.625rem;
  }
  .officialrank-box {
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    .officialrank-item {
      width: 20%;
      box-sizing: border-box;
      // flex: 20%;
      padding: 0.9375rem 0.625rem;
      cursor: pointer;
      .official-item {
        position: relative;
        box-sizing: border-box;
        overflow: hidden;
        //   padding: 0.625rem;
        span {
          display: block;
          text-align: center;
        }
        .tooltip {
          box-sizing: border-box;
          position: absolute;
          top: -3.125rem;
          left: 0;
          width: 100%;
          background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4));
          height: 1.875rem;
          z-index: 2;
          text-align: right;
          line-height: 1.875rem;
          color: #fff;
          padding: 0 0.625rem;
          transition: all 0.6s;
          border-radius: 0.3125rem;
        }
        .image {
          position: relative;
          width: 100%;
          img {
            width: 100%;
            height: 100%;
            border-radius: 0.3125rem;
          }
          .play {
            width: 3.125rem;
            height: 3.125rem;
            border-radius: 50%;
            position: absolute;
            background: rgba(255, 255, 255, 0.5);
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 1;
            text-align: center;
            line-height: 3.125rem;
            font-size: 1.875rem;
            transition: all 0.6s;
            opacity: 0;

            .icon-icon_play {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              font-size: 1.25rem;
              color: rgb(232, 60, 60);
            }
          }
        }
      }
    }

    .official-item:hover .tooltip {
      top: 0;
    }
    .official-item:hover .image .play {
      opacity: 1;
    }
  }
}
</style>
